<template>
  <table class="g-table g-table--hover">
    <thead>
      <tr>
        <th @click="setSort('symbol')">
          <span>{{ $t("table_pair") }}</span>
          <img
            src="@/assets/images/icon-sort-down-dark.svg"
            v-if="field === 'symbol' && sort === 1"
            alt=""
          />
          <img src="@/assets/images/icon-sort-dark.svg" v-else alt="" />
        </th>
        <th @click="setSort('lastPrice')">
          <span>{{ $t("table_last_price") }}</span>
          <img
            src="@/assets/images/icon-sort-down-dark.svg"
            v-if="field === 'lastPrice' && sort === 1"
            alt=""
          />
          <img src="@/assets/images/icon-sort-dark.svg" v-else alt="" />
        </th>
        <th @click="setSort('priceChangePercent')">
          <span>{{ $t("table_change") }}</span>
          <img
            src="@/assets/images/icon-sort-down-dark.svg"
            v-if="field === 'priceChangePercent' && sort === 1"
            alt=""
          />
          <img src="@/assets/images/icon-sort-dark.svg" v-else alt="" />
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, i) in fillList" :key="i" @click="select(item)">
        <td>
          <span>
            {{ item.symbol }}
          </span>
        </td>
        <td :class="'price ' + item.color">
          <span>{{ item.lastPrice | formatPrice }}</span>
        </td>
        <td
          :class="
            parseFloat(item.priceChangePercent) > 0
              ? 'green'
              : parseFloat(item.priceChangePercent) < 0
              ? 'red'
              : 'grey'
          "
        >
          <span>
            {{ parseFloat(item.priceChangePercent) > 0 ? "+" : "" }}{{ item.priceChangePercent }}
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: "MarketTable",
  props: {
    list: {
      type: Array,
      require: true,
    },
  },
  data() {
    return {
      field: "symbol",
      sort: 0,
    };
  },
  computed: {
    fillList() {
      const field = this.field;
      if (this.sort) {
        return this.list.sort((a, b) => {
          if (field === "symbol") {
            return a[field] > b[field] ? -1 : 1;
          } else {
            return parseFloat(a[field]) > parseFloat(b[field]) ? -1 : 1;
          }
        });
      }
      return this.list.sort((a, b) => {
        if (field === "symbol") {
          return a[field] > b[field] ? 1 : -1;
        } else {
          return parseFloat(a[field]) > parseFloat(b[field]) ? 1 : -1;
        }
      });
    },
  },
  methods: {
    setSort(val) {
      if (this.field === val) {
        this.sort = 1 - this.sort;
        // window.localStorage.setItem('market_sort_direction', this.sort);
      } else {
        this.field = val;
        this.sort = 0;
        // window.localStorage.setItem('market_sort_field', val);
      }
    },
    select(target) {
      this.$emit("select", target.symbol);
    },
  },
};
</script>

<style lang="scss" scoped>
.g-table {
  border-spacing: 0;

  tbody {
    display: block;
    height: calc(100vh - 560px);
    overflow-x: hidden;
    overflow-y: auto;
  }

  thead,
  tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  th {
    padding-top: 0;
    padding-bottom: 5px;
    cursor: pointer;

    &:first-child {
      min-width: 70px; // 搜索时减少列宽度抖动
      padding-left: var(--table-space);
    }

    &:last-child {
      min-width: 60px;
      padding-left: var(--table-space);
    }

    img {
      width: 15px;
      vertical-align: middle;
    }
  }

  tr {
    &:hover {
      td {
        background-color: rgba(255, 255, 255, 0.03);
      }
    }
  }

  td {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 12px;
    font-family: "Roboto Regular";

    &:first-child {
      padding-left: var(--table-space);
    }

    &:last-child {
      padding-left: var(--table-space);
    }

    &.red {
      color: var(--color-red);
    }

    &.green {
      color: var(--color-green);
    }

    &.grey {
      color: var(--color-content);
    }
  }
}

.price {
  min-width: 80px;
}
</style>
